<template>
  <q-card flat>
    <q-item dense class="q-px-sm">
      <q-item-section>
        <div class="row items-center">
          <div>
            <q-icon size="24px" color="purple-2" name="fa-solid fa-feather"></q-icon>
          </div>
          <div class="q-pl-sm">标签热榜</div>
        </div>
      </q-item-section>

      <q-item-section class="col-auto">
        <q-btn dense color="" round flat icon="arrow_forward" to="/tag" />
      </q-item-section>
    </q-item>
    <q-separator />
    <RouterLink :to="'/tag/' + item.id" v-for="item in rows" :key="item.id">
      <q-chip square>
        {{ item.content }}
        <q-chip dense>
          <span>{{ item.readNum }}</span>
          <q-tooltip> 阅读量 </q-tooltip>
        </q-chip>
      </q-chip>
    </RouterLink>
  </q-card>
</template>

<script setup lang="ts">
import type { ApiType } from 'src/service/api'
import { mainHotTag } from 'src/service/api'
import { onActivated, onMounted, ref } from 'vue'

const rows = ref<ApiType<typeof mainHotTag>['Return']>([])

const f5 = async () => {
  const { data, error } = await mainHotTag()
  if (error) {
    return
  }
  rows.value = data
}
onMounted(() => {
  f5()
})

onActivated(() => {
  f5()
})
</script>

<style scoped></style>
